<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>热力图Demo</title>
	<link href="../css/jquery-ui.min.css" rel="stylesheet">
	<script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script src="../js/heatmap.min.js"></script>
	<style type="text/css">
	    .ui-selectable-helper {
			position: absolute;
			z-index: 100;
			border: 1px solid #fff;
			background: rgb(78,173,225);
			opacity:0.8;
			filter:alpha(opacity=80)
		}
	</style>
	<script>
	
	
	function showSelectedData(selectablePos,selectableHelper){
		//console.log("{x1:"+selectablePos.x1+",y1:"+selectablePos.y1+",x2:"+selectablePos.x2+",y2:"+selectablePos.y2+"}");
		//显示选择区域
		selectableHelper.html("<table style=\"width:100%;height: 100%\">" +
				               "<tr>" +
				               "<td width=\"100%\" align=\"center\" valign=\"middle\">点击量：加载中...</br> 点击占比：加载中...</td>" +
				               "</tr>" +
				              "</table>");
		selectableHelper.show();
	}
	
	    $(document).ready(function(){
	    	
	    	var selectablePos={};
	    	var selectableHelper = $("<div style='color:#fff;text-align:center;font-weight: bold;' class='ui-selectable-helper'></div>");
	    	$("body").append(selectableHelper);
	    	selectableHelper.hide();
	        $("#hmselected").selectable({
	        	tolerance:"fit",
	        	start: function( event, ui ) {
	        		selectablePos.pageX = event.pageX;
	        		selectablePos.pageY = event.pageY;
	        		selectablePos.offsetX1 = event.offsetX;
	        		selectablePos.offsetY1 = event.offsetY;
	        		
	        		selectableHelper.text("");
	        		selectableHelper.css({
	        			"left": selectablePos.pageX,
	        			"top": selectablePos.pageY,
	        			"width": 0,
	        			"height": 0
	        		});
	        		selectableHelper.hide();
	        	},
	        	stop: function( event, ui ) {
	        		
	        		var tmp;
	        		//计算选中区域的大小
	        		var x1 = selectablePos.pageX;
	    			var y1 = selectablePos.pageY;
	    			var x2 = event.pageX;
	    			var y2 = event.pageY;
	    			if (x1 > x2) { tmp = x2; x2 = x1; x1 = tmp;}
	    			if (y1 > y2) { tmp = y2; y2 = y1; y1 = tmp;}
	    			var cssPos  = {left: x1, top: y1, width: x2 - x1, height: y2 - y1 };
	    			
	    			//计算查询数据的范围
	    			var offsetX1 = Math.floor(selectablePos.offsetX1);
	        		var offsetY1 = Math.floor(selectablePos.offsetY1);
	    		    var offsetX2 = Math.floor(event.offsetX);
	        		var offsetY2 = Math.floor(event.offsetY);
	        		if (offsetX1 > offsetX2) { tmp = offsetX2; offsetX2 = offsetX1; offsetX1 = tmp;}
	    			if (offsetY1 > offsetY2) { tmp = offsetY2; offsetY2 = offsetY1; offsetY1 = tmp;}
	    			var dataPos = {x1:offsetX2-cssPos.width,y1:offsetY2-cssPos.height,x2:offsetX2,y2:offsetY2};
	    			
	    			//超出范围则要修正
	    			if(dataPos.x1<0){
	    				cssPos.left -= dataPos.x1;
	    				cssPos.width += dataPos.x1;
	    				dataPos.x1 = 0;
	    			}
	    			if(dataPos.y1<0){
	    				cssPos.top -= dataPos.y1;
	    				cssPos.height += dataPos.y1;
	    				dataPos.y1 = 0;
	    			}
	    			
	    			if(cssPos.width>1 && cssPos.height>1){
	    			    selectableHelper.css(cssPos);
	    				showSelectedData(dataPos,selectableHelper);
	    			}else{
	    				selectableHelper.hide();
	    			}
	        	}
	        });
		
	        /*
		    require.config({
		        paths: {
		            echarts: '../js/echarts'
		        }
		    });
		
		    require(['echarts','echarts/chart/heatmap'],
		    		function (ec,theme){
		    			
		    			var heatData = [];
		    			
		    			for (var i = 0; i < 20; ++i) {
		    			    heatData.push([
		    			        400 + Math.random() * 300,
		    			        5 + Math.random() * 10,
		    			        Math.random()
		    			    ]);
		    			}
		    			for (var i = 0; i < 100; ++i) {
		    			    heatData.push([
		    			        100 + Math.random() * 600,
		    			        150 + Math.random() * 50,
		    			        Math.random()
		    			    ]);
		    			}
		    			for (var i = 0; i < 200; ++i) {
		    			    heatData.push([
		    			        Math.random() * 1000,
		    			        Math.random() * 800,
		    			        Math.random() * 0.5
		    			    ]);
		    			}
		    			
		    			var option = {
		    			    series : [
		    			        {
		    			            type : 'heatmap',
		    			            data : heatData,
		    			            minAlpha: 0.2,
		    			            valueScale: 2,
		    			            opacity: 0.6
		    			        }
		    			    ]
		    			};
		    			var heapChart = ec.init(document.getElementById('hmdata'),theme);
		    			heapChart.setOption(option,true);
		             }
		    );
		    */
		    

	        var heatmapInstance = h337.create({
	      	container: document.getElementById('hmselected')
	      	});

	      	var points = [];
	      	var max = 0;
	      	var width = 840;
	      	var height = 400;
	      	var len = 200;

	      	while (len--) {
	      	  var val = Math.floor(Math.random()*100);
	      	  max = Math.max(max, val);
	      	  var point = {
	      	    x: Math.floor(Math.random()*width),
	      	    y: Math.floor(Math.random()*height),
	      	    value: val
	      	  };
	      	  points.push(point);
	      	}
	      	var data = { 
	      	  max: max, 
	      	  data: points 
	      	};
	      	heatmapInstance.setData(data);
		    
		  });
	    
	    (function(){
        	//添加点击事件
        	document.attachEvent?document.attachEvent("onmouseup",function(e){
        		recEvent(e);
            }):document.addEventListener&&document.addEventListener("onmouseup",function(e){
            	recEvent(e);
            },false)
        	
            var ifIE=/msie (\d+\.\d+)/i.test(navigator.userAgent);
	    	var scrX =  window.screen.width;
	    	var scrY =  window.screen.height;
            
            function recEvent(event){
            	var poix = 0;
            	var poiy = 0;
            	if(ifIE){
            		var scrollTop  = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
            		var scrollLeft = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
            		poix = event.clientX+scrollLeft;
            		poiy = event.clientY+scrollTop;
            	}else{
            		poix = event.pageX;
            		poiy = event.pageY;
            	}
            	
            	var tag = event.target||event.srcElement;
            	var aDom = "a" == tag.tagName.toLowerCase()?tag:watchaDom(event);
            	
                if(a != null){
                	alert(a.href);
                }
            	
            	console.log("{screenX:"+scrX+",screenY:"+scrY+",x:"+poix+",y:"+poiy+"}");
            }
            
            function watchaDom(a){
            	var b;
                for(b="A";(a=a.parentNode)&&1==a.nodeType;){
                	if(a.tagName==b)return a;
                }
                return null;
            }
        })();
	    
  </script>

</head>
	<body>
		<div id="hmselected" style="height: 4000px;padding: 0px;">
		    <div id="hmdata" style="z-index:auto;width: 100%;height: 4000px;position: absolute;top: 0px;left: 0px;">
		        <iframe id="hmpage" src="http://uat.woego.cn/woego/main/pageInit" width="100%" height="3950px" scrolling="no" frameborder="0"></iframe>
		    </div>
		    <div style="z-index:auto;width: 100%;height: 4000px;position: absolute;top: 0px;left: 0px;background-color:#000000;opacity:0.7;filter:alpha(opacity=70)"></div>
		</div>
	</body>
</html>
